import { useAppDispatch, useAppSelector } from '@/store';
import {
  clearOriginAction,
  clearReplyCommentAction,
  getReplyCommentsAction,
} from '@/store/action/comment';
import { ICommentItem } from '@/store/reducer/comment';
import { NavBar } from 'antd-mobile';
import { useEffect } from 'react';
import CommentFooter from '../CommentFooter';
import CommentItem from '../CommentItem';
import NoComment from '../NoComment';
import styles from './index.module.scss';
export default function CommentReply() {
  const { originComment, replyData, commentData } = useAppSelector(
    (state) => state.comment
  );
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(getReplyCommentsAction(originComment.com_id));

    return () => {
      dispatch(clearReplyCommentAction());
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  const newOriginComent =
    commentData.results?.find((item) => {
      return item.com_id === originComment.com_id;
    }) || ({} as ICommentItem);

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar
          className="transparent-navbar"
          onBack={() => dispatch(clearOriginAction())}
        >
          <div>{replyData.results?.length || 0}条回复</div>
        </NavBar>

        <div className="origin-comment">
          <CommentItem type="origin" comment={newOriginComent} />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {!replyData.results?.length ? (
            <NoComment />
          ) : (
            replyData.results.map((item) => (
              <CommentItem type="reply" key={item.com_id} comment={item} />
            ))
          )}
        </div>

        <CommentFooter type="reply" />
      </div>
    </div>
  );
}
